.spectrum-ColorHandle.is-focused,
.spectrum-ColorHandle.focus-ring {
  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);

  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
}

.spectrum-ColorHandle {
  display: block;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
  height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));

  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2);
  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2);

  border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25));
  border-style: solid;

  background-size:
    var(--spectrum-global-dimension-static-size-200, 16px)
    var(--spectrum-global-dimension-static-size-200, 16px);
  background-position:
    calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)),
    calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(var(--spectrum-global-dimension-static-size-100, 8px) + -1 * var(--spectrum-global-dimension-static-size-25, 2px)),
    calc(var(--spectrum-global-dimension-static-size-100, 8px) + -1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px) + -1 * var(--spectrum-global-dimension-static-size-25, 2px)),
    calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px) + -1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px));

  transition:
    width var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
    height var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
    border-width var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
    margin-left var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
    margin-top var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
}

.spectrum-ColorHandle,
  .spectrum-ColorHandle:after {
    border-radius: 100%;
  }

.spectrum-ColorHandle:after {
    content: '';
    left: calc(50% - var(--spectrum-global-dimension-size-300) / 2);
    top: calc(50% - var(--spectrum-global-dimension-size-300) / 2);
    position: absolute;
    display: block;
    width: var(--spectrum-global-dimension-size-300);
    height: var(--spectrum-global-dimension-size-300);
  }

.spectrum-ColorHandle.is-disabled {
    pointer-events: none;
  }

.spectrum-ColorHandle-color {
  border-radius: 100%;
  width: 100%;
  height: 100%;
}

.spectrum-ColorHandle {
  border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white));
  box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) rgba(0, 0, 0, 0.42);

  background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255));
  background-image:
    linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%),
    linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%);
}

.spectrum-ColorHandle.is-disabled {
    border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
    background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
    box-shadow: none;
  }

.spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-color {
      display: none;
    }

.spectrum-ColorHandle-color {
  box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) rgba(0, 0, 0, 0.42);
}
